<%--
  Created by IntelliJ IDEA.
  User: Muyid
  Date: 2022/4/14
  Time: 15:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情</title>
    <link rel="stylesheet" href="${path}/plugins/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${path}/plugins/layui/css/layui.css"
          tppabs="http://res.layui.com/layui/dist/css/layui.css"
          media="all">
    <link rel="stylesheet" href="${path}/css/groupon/groupon.css">
    <link rel="stylesheet" href="${path}/css/index/index.css">
</head>

<body>
<%@include file="../nav/navbarheader.jsp" %>
<input type="hidden" name="userIdHid" value="${user.id}">
<div class="container" style="margin-top: 87px;">
    <div class="detail">
        <div class="bd">
            <div class="title">
                <h1>${fGood.goodsName}</h1>
            </div>
            <div class="price-wrap">
                <h3 class="price">
                    <span class="price-display"><em>￥</em>${fGood.goodsCurrentPrice}</span>
                    <span class="display">
                            <span class="price-original">
                                门市价&nbsp;<em>￥</em>${fGood.goodsOriginalPrice}
                                <input type="hidden" value="${fGood.goodsCurrentPrice}" class="price" id="price">
                            </span>
                        </span>
                </h3>
                <div class="text">
                    领取优惠券，享更多超值优惠！
                </div>
                <i></i>
            </div>
            <div class="action-box">
                <div class="box-left">

                    <%--                    <div id="test2" class="row"></div>--%>

                    <%--                    <div><a href=""><span>232条团购评价</span></a></div>--%>
                </div>
                <div class="box-right">
                    <div>
                        <span><img src="${path}/imgs/storeInfo/退款.png" alt="">&nbsp;支持随时退</span>
                    </div>
                    <div>
                        <span><img src="${path}/imgs/storeInfo/过期退.png" alt="">&nbsp;过期自动退</span>
                    </div>
                </div>
            </div>
            <div class="problem">
                <div class="price-introduce" style="cursor: pointer;">
                    <a id="price-info">
                        <span>价格说明</span>
                        <i class="layui-icon layui-icon-about"></i>
                    </a>
                </div>
            </div>
            <div class="buy">
                <div class="buy-btn">
                    <a href="#" class="layui-btn layui-btn-danger" id="order">添加订单</a>
                    <a href="#" class="layui-btn btn layui-btn-danger"
                       style="width: 80px;">添加订单</a>
                    <a href="#" class="layui-btn layui-btn-danger" id="noworder">立即购买</a>
                </div>
            </div>
        </div>
        <div class="lbd">
            <div class="img-area">
                <div class="slider">
                    <div id="myCarousel" class="carousel slide">
                        <!-- 轮播（Carousel）项目 -->
                        <div class="carousel-inner">
                            <div class="item active" style="width:100%;height: 100%;">
                                <img src="${path}/imgs/storeInfo/${fGoodsPicture.url1}" alt="First slide"
                                     style="margin-top: 29px;margin-left: -130px;">
                            </div>
                            <div class="item" style="width:100%;height: 100%;">
                                <img src="${path}/imgs/storeInfo/${fGoodsPicture.url2}" alt="Second slide"
                                     style="margin-top: 29px;margin-left: -130px;">
                            </div>
                            <div class="item" style="width:100%;height: 100%;">
                                <img src="${path}/imgs/storeInfo/${fGoodsPicture.url3}" alt="Third slide"
                                     style="margin-top: 29px;margin-left: -130px;">
                            </div>
                        </div>
                        <!-- 轮播（Carousel）导航 -->
                        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                        <div class="slider-bottom" style="margin-top: 3px;">
                            <a href="#myCarousel" data-target="#myCarousel" data-slide-to="0" class="active">
                                <img src="${path}/imgs/storeInfo/${fGoodsPicture.url1}" alt="">
                            </a>
                            <a href="#myCarousel" data-target="#myCarousel" data-slide-to="1">
                                <img src="${path}/imgs/storeInfo/${fGoodsPicture.url2}" alt="">
                            </a>
                            <a href="#myCarousel" data-target="#myCarousel" data-slide-to="2">
                                <img src="${path}/imgs/storeInfo/${fGoodsPicture.url3}" alt="">
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="func row">
                <div class="collection">
                    <a href="#" class="collect">
                        <span class="glyphicon green glyphicon-heart-empty"></span>
                        <span class="col-text">收藏</span>
                    </a>
                </div>
                <div class="validity" id="time">
                </div>
            </div>
        </div>
    </div>

    <div class="content">
        <div class="other-box">
            <div class="tit">
                <h3>该品牌的其他团购</h3>
            </div>
            <div class="cont">
                <ul>
                    <c:forEach var="good" items="${fGoodList}">
                        <c:if test="${good.id != ''+goodId+''}">
                            <li>
                                <a href='/fr/groupon/enter/${fShop.id}/${good.id}'>
                                    <input class="hidden" id="goodId" value="${good.id}">
                                    <span class="price Price-font">¥${good.goodsCurrentPrice}</span>
                                    <span class="sellprice">门店价${good.goodsOriginalPrice}元</span>
                                    <span class="infor">${good.goodsName}</span>
                                </a>
                            </li>
                        </c:if>
                    </c:forEach>
                </ul>
            </div>
        </div>
    </div>

    <div class="details">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title">
                <li class="layui-this"><a>适用门店</a></li>
                <li><a>团购详情</a></li>
                <li><a>购买须知</a></li>
                <%--                <li><a>团购评价</a></li>--%>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="items">
                        <div class="wrapper-map" id="wrapper-map"></div>
                        <div class="list-holder">
                            <ul class="shoplist">
                                <li class="content_list">
                                    <div class="shoptitle">
                                        <a href="">${fShop.shopName}</a>
                                    </div>
                                    <div class="shopdetail">
                                        <p></p>
                                        <p>地址：${fShop.province}&nbsp;${fShop.city} ${fShop.area}&nbsp;${fShop.place}</p>
                                        <p>电话：${fShop.shopTelnumber}</p>
                                        <p>营业时间：${fShop.businessTime}</p>
                                        <p></p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="items muting">
                        <div class="list-detail">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>数量</th>
                                    <th>单价</th>
                                    <th>最高价</th>
                                    <th>团购价</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>${fGood.goodsName}</td>
                                    <td>1位</td>
                                    <td>${fGood.goodsOriginalPrice}</td>
                                    <td>${fGood.goodsOriginalPrice}</td>
                                    <td>${fGood.goodsCurrentPrice}</td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                        <div class="list-holder" style="margin-right: 50px;">
                            <ul class="shoplist" style="margin-top: 0px;">
                                <li class="content_list">
                                    <div class="shopdetail">
                                        <p>${fGood.goodsName}：11:00-14:00,17:00-21:00</p>
                                        <p>最多可用餐2小时</p>
                                        <p>${fGood.goodsInfo}</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="detail-box">
                        <div class="purchase-notes">
                            <dl>
                                <dt>有效期</dt>
                                <dd>
                                    <p class="listitem">${fGood.goodsStartDate}至${fGood.goodsEndDate}</p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>除外日期</dt>
                                <dd>
                                    <p class="listitem">有效期内周末、法定节假日通用</p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>预约提醒</dt>
                                <dd>
                                    <p class="listitem">为了保证您良好体验，可提前致电商家是否有位，消费高峰期可能需要等位</p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>温馨提示</dt>
                                <dd>
                                    <p class="listitem">
                                        1.1.2米（含）以下儿童免费(每位大人限带2位儿童),1.2米(不含）~1.4米（不含）儿童可享半价，1.4米（含）以上按照成人计算</p>
                                    <p class="listitem">2.到店请先出示团购劵，每张美团劵仅限一个成人使用，身高1.4米以上儿童记入人数</p>
                                    <p class="listitem">3.同桌客人只能选同一种餐标，非自取类食品皆须下单</p>
                                    <p class="listitem">购买用户不可同时享受商家其他优惠</p>
                                    <p class="listitem">部分菜品因时令原因有所不同，请以店内当日实际供应为准</p>
                                    <p class="listitem">使用优惠券购买团单，有效期以优惠券规则为准</p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>商家服务</dt>
                                <dd>
                                    <p class="listitem">商家提供免费WiFi</p>
                                    <p class="listitem">停车位收费标准：商场停车位，收费标准请参考商场</p>
                                </dd>
                            </dl>
                            <dl>
                                <dt>发票信息</dt>
                                <dd>
                                    <p class="listitem">本单发票由商家提供，请在消费时向商家索取</p>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
<%--                <div class="layui-tab-item">--%>
<%--                    <div class="action-box list-comment">--%>
<%--                        <div class="box-left">--%>
<%--                            <div id="test3"></div>--%>
<%--                            <div><a href=""><span>232条团购评价</span></a></div>--%>
<%--                        </div>--%>
<%--                        <div class="box-right">--%>
<%--                            <div>--%>
<%--                                <span><img src="${path}/imgs/storeInfo/退款.png" alt="">&nbsp;支持随时退</span>--%>
<%--                            </div>--%>
<%--                            <div>--%>
<%--                                <span><img src="${path}/imgs/storeInfo/过期退.png" alt="">&nbsp;过期自动退</span>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                    <div class="comment-left">--%>
<%--                        <div class="comment">--%>
<%--                            <div class="comment-info">--%>
<%--                                <div class="coment-top">--%>
<%--                                    <a href=""><img src="${path}/imgs/storeInfo/Headportrait.png" alt=""></a>--%>
<%--                                    <div class="customer-name">--%>
<%--                                        <span>--%>
<%--                                        <a href="">--%>
<%--                                        Tripadvisor用户--%>
<%--                                        </a>--%>
<%--                                        &nbsp;写了一条评价--%>
<%--                                        2020-11-02--%>
<%--                                        </span>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                                <div class="customer-comment">--%>
<%--                                    <div>--%>
<%--                                        <img src="${path}/imgs/storeInfo/haoping.png" alt="">--%>
<%--                                    </div>--%>
<%--                                    <div>--%>
<%--                                        <div class="row">--%>
<%--                                            <a href=""><span>一流的苏式面馆</span></a>--%>
<%--                                        </div>--%>
<%--                                        <div class="row boxp box">--%>
<%--                                            <q>--%>
<%--                                                <span>--%>
<%--                                                苏州最好的面馆之一，仅仅营业到下午一点，晚点去就关门了。--%>
<%--                                                面馆生意很好，一楼基本挤满人，二楼比较清净，但是价格贵一点，而且每人需要点一杯茶。--%>
<%--                                                skaskaks--%>
<%--                                                salkalskkajs刷卡萨克斯卡萨深咖色卡扣式卡卡萨斯喀课时卡卡萨卡萨深咖色晶澳科技上课啦就算了卡机萨拉斯--%>
<%--                                                </span>--%>
<%--                                            </q>--%>
<%--                                        </div>--%>
<%--                                        <div class="row info-more">--%>
<%--                                            <span class="more-text">阅读更多</span>--%>
<%--                                            <span class="glyphicon glyphicon-chevron-down"></span>--%>
<%--                                        </div>--%>
<%--                                        <div class="row more-detail">--%>
<%--                                            <div class="row">--%>
<%--                                                <span class="more-font">用餐日期:</span>--%>
<%--                                                <span class="more-date">2019年04月</span>--%>
<%--                                            </div>--%>
<%--                                        </div>--%>
<%--                                        <div class="row more-details">--%>
<%--                                            <div class="row">--%>
<%--                                                <span class="more-font">用餐日期:</span>--%>
<%--                                                <span class="more-date">2019年04月</span>--%>
<%--                                            </div>--%>
<%--                                            <div class="row">--%>
<%--                                                <span class="more-font">用餐日期:</span>--%>
<%--                                                <span class="more-date">2019年04月</span>--%>
<%--                                            </div>--%>
<%--                                            <div class="row">--%>
<%--                                                <span class="more-font">用餐日期:</span>--%>
<%--                                                <span class="more-date">2019年04月</span>--%>
<%--                                            </div>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </div>--%>

<%--                                <div class="praise">--%>
<%--                                    <div class="row">--%>
<%--                                        <div style="float: left;">--%>
<%--                                            <a href="">--%>
<%--                                                <span>--%>
<%--                                                回复--%>
<%--                                                </span>--%>
<%--                                            </a>--%>
<%--                                        </div>--%>
<%--                                        <div style="float: right;">--%>
<%--                                            <span>--%>
<%--                                            <span>--%>
<%--                                            <img src="${path}/imgs/storeInfo/爱心.png" alt="">--%>
<%--                                            </span>--%>

<%--                                            <a href="">--%>
<%--                                            <span>--%>
<%--                                            点赞&nbsp;--%>
<%--                                            </span>--%>
<%--                                            </a>--%>
<%--                                            </span>--%>
<%--                                        </div>--%>
<%--                                    </div>--%>
<%--                                </div>--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </div>--%>
            </div>
        </div>
    </div>
</div>
<input type="hidden" name="goodsIdHid" value="${fGood.id}">
<input type="hidden" name="shopIdHid" value="${fGood.shopId}">
<!-- 引入jquery框架 -->
<script src="${path}/plugins/jquery.min.js"></script>

<script src="${path}/plugins/layui/layui.js" charset="utf-8"></script>


<!-- 引入bootstrap.js/bootstrap.min.js,bootstrap依赖于jquery框架 -->
<script src="${path}/plugins/bootstrap-3.4.1-dist/js/bootstrap.js"></script>

<script src="${path}/js/groupon/groupon.js"></script>
<script src="${path}/js/pay/pay.js"></script>
<!--三、引入高德地图的js-->
<script src="https://webapi.amap.com/maps?v=1.4.13&key=221c6900cf865cccbcf2a25c228e4f26"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script>

    window.onload = function () {
        let goodId = ${fGood.id};

        var map = map = new AMap.Map('wrapper-map', {
            zoom: 16, //设置地图显示的缩放级别
            center: [${coordinate}]
        });

        var marker = new AMap.Marker({
            position: new AMap.LngLat(${coordinate}), // 经纬度对象，也可以是经纬度构成的一维数组[120.712113, 31.318868]
            title: '${fShop.shopName}'
        });

        map.add(marker);
    }

    //假设 - 活动开始的时间
    let start = new Date("${fGood.goodsEndDate}");
    console.log(start);

    let div = document.getElementById("time");

    function dao() {
        //获取当前系统时间
        let now = new Date();

        //获取来个日期之间的秒数
        let sec = (start - now) / 1000;

        //剩余的秒数
        //25小时
        let d = parseInt(sec / 60 / 60 / 24);

        // 36小时=1天 + 12小时
        //hours%24
        let hours = parseInt((sec / 60 / 60) % 24);

        //76秒
        //2h10分钟 = 130m*60 = 7800
        //结论 -> min%60
        let m = parseInt((sec / 60) % 60);

        //seconds % 60
        let s = parseInt(sec % 60);

        div.innerHTML = "剩余:" + d + "天" + hours + "时" + m + "分" + s + "秒";
    }

    let s = setInterval(dao, 1000);
</script>
</body>

</html>
